<template>
  <vxe-modal v-model="dialogVisible" title="测算" resize show-footer show-zoom :width="isMobile?'100%':'60%'" :fullscreen="isMobile">
    <vxe-table :data="tableData">
      <vxe-colgroup title="产品盈利测算模板" align="center">
        <vxe-colgroup>
          <vxe-colgroup title="产品名称">
            <vxe-column type="seq" align="center" width="100" title="序号" />
          </vxe-colgroup>
          <vxe-colgroup :title="modelValue.skuTitle">
            <vxe-column title="项目">
              <template #default="{row,$rowIndex}">
                <div v-if="$rowIndex ===0">
                  <div style="height:30px">销售额</div>
                  <div style="height:30px">折扣</div>
                  <div style="height:30px">实销额</div>
                  <div style="height:30px">净收入</div>
                </div>
                <div v-if="$rowIndex ===1">
                  <div>减：成本</div>
                  <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;运费</div>
                  <div>毛利额</div>
                </div>
                <div v-if="$rowIndex ===2">
                  <div style="height:30px">减：促销费用</div>
                  <div style="height:30px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;服务费</div>
                  <div style="height:30px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;行政费用</div>
                  <div style="height:30px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;综合税费</div>
                  <div style="height:30px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;资金占用</div>
                  <div style="height:30px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其他费用</div>
                  <div style="height:30px">加：专项补贴</div>
                </div>
                <div v-if="$rowIndex ===3">
                  <div>边际贡献</div>
                </div>
              </template>
            </vxe-column>
          </vxe-colgroup>
          <vxe-colgroup title="单位：元" align="right">
            <vxe-column title="额" header-align="center" align="right">
              <template #default="{row,$rowIndex}">
                <div v-if="$rowIndex ===0">
                  <div style="height:30px">{{ modelValue.factoryPrice }}</div>
                  <div style="height:30px">{{ zk }}</div>
                  <div><vxe-input v-model="custom.salePrice" type="number" :min="0" /></div>
                  <div style="height:30px">{{ jsr }}</div>
                </div>
                <div v-if="$rowIndex ===1">
                  <div style="height:30px">{{ modelValue.excludingTaxCosts }}</div>
                  <div style="height:30px">{{ modelValue.freight }}</div>
                  <div style="height:30px">{{ mle }}</div>
                </div>
                <div v-if="$rowIndex ===2">
                  <div style="height:30px">{{ l3.cxfy }}</div>
                  <div style="height:30px">{{ l3.fwf }}</div>
                  <div style="height:30px">{{ l3.xzfy }}</div>
                  <div style="height:30px">{{ l3.zhsf }}</div>
                  <div style="height:30px">{{ l3.zjzy }}</div>
                  <div style="height:30px">{{ l3.qtfy }}</div>
                  <div style="height:30px">{{ l3.zxbt }}</div>
                </div>
                <div v-if="$rowIndex ===3">
                  <div>{{ bjgx }}</div>
                </div>
              </template>
            </vxe-column>
            <vxe-column title="率" header-align="center" align="right">
              <template #default="{row,$rowIndex}">
                <div v-if="$rowIndex ===0" />
                <div v-if="$rowIndex ===1">
                  <div style="height:30px" />
                  <div style="height:30px">{{ freightRate+'%' }}</div>
                  <div style="height:30px">{{ mll+'%' }}</div>
                </div>
                <div v-if="$rowIndex ===2">
                  <div><vxe-input v-model="custom.cxfy" type="number" /></div>
                  <div><vxe-input v-model="custom.fwf" type="number" /></div>
                  <div><vxe-input v-model="custom.xzfy" type="number" /></div>
                  <div>
                    <!-- <vxe-input v-model="custom.zhsf" type="number" /> -->
                    0%
                  </div>
                  <div><vxe-input v-model="custom.zjzy" type="number" /></div>
                  <div>
                    <!-- <vxe-input v-model="custom.qtfy" type="number" /> -->
                    0%
                  </div>
                  <div>
                    <!-- <vxe-input v-model="custom.zxbt" type="number" /> -->
                    0%
                  </div>
                </div>
                <div v-if="$rowIndex ===3">
                  <div>{{ bjgxl +'%' }}</div>
                </div>
                <div v-if="$rowIndex ===4">
                  <div>{{ finalRate+'%' }}</div>
                </div>
              </template>
            </vxe-column>
          </vxe-colgroup>
        </vxe-colgroup>

      </vxe-colgroup>

    </vxe-table>
    <template #footer>
      <!-- <vxe-button status="primary" content="提交" :disabled="loading" @click="clickSubmitBtn" /> -->
    </template>
  </vxe-modal>
</template>

<script>
import { round } from 'lodash'
import Api from '@/api/finance/budget'
import { VxeModalMixin } from '@/mixins/vxe/VxeModalMixin'
import { VxeSysDataMixin } from '@/mixins/vxe/VxeSysDataMixin'
export default {
  name: 'FinanceBudgetUpdateDialog',
  mixins: [VxeModalMixin, VxeSysDataMixin],
  data() {
    return {
      api: Api.update,
      modelValue: {
        id: undefined,
        skuName: undefined,
        skuTitle: undefined,
        taxRate: undefined,
        factoryPrice: undefined,
        excludingTaxCosts: undefined,
        freight: undefined
      },
      custom: {
        salePrice: 0,
        cxfy: 10,
        fwf: 6,
        xzfy: 0,
        zhsf: 0,
        zjzy: 0,
        qtfy: 0,
        zxbt: 0
      },

      rules: {
        id: [
          { required: true }
        ],
        skuCode: [
          { required: true }
        ],
        skuName: [
          { required: true }
        ],
        factoryPrice: [
          { required: true }
        ],
        excludingTaxCosts: [
          { required: true }
        ],
        freight: [
          { required: true }
        ]
      }
    }
  },
  computed: {
    tableData() {
      return [
        {},
        {},
        {},
        {},
        {}
      ]
    },
    zk() {
      return this.doMath('numberSub', this.modelValue.factoryPrice, this.custom.salePrice)
    },
    jsr() {
      const v = this.doMath('numberDiv', this.custom.salePrice || 0, (this.modelValue.taxRate || 1))
      return round(v, 2)
    },
    mle() {
      const m = this.doMath('numberSub', this.jsr, this.modelValue.excludingTaxCosts, this.modelValue.freight)
      return m
    },
    freightRate() {
      const v = this.doMath('numberDiv', this.modelValue.freight, this.modelValue.factoryPrice)
      const r = this.doMath('numberMul', v, 100)
      return round(r, 2)
    },
    mll() {
      let v = 0
      if (this.custom.salePrice) {
        v = this.doMath('numberDiv', this.mle, this.custom.salePrice)
      }
      const r = this.doMath('numberMul', v, 100)
      return round(r, 2)
    },
    l3() {
      const cxfy = this.doMath('numberMul', this.custom.cxfy || 0, this.modelValue.factoryPrice, 0.01)
      const fwf = round(this.doMath('numberMul', this.custom.fwf || 0, cxfy, 0.01), 2)
      const xzfy = this.doMath('numberMul', this.custom.xzfy || 0, this.modelValue.factoryPrice, 0.01)
      const zjzy = this.doMath('numberMul', this.custom.zjzy || 0, this.modelValue.factoryPrice, 0.01)
      return {
        cxfy: cxfy,
        fwf: fwf,
        xzfy: xzfy,
        zhsf: 0,
        zjzy: zjzy,
        qtfy: 0,
        zxbt: 0
      }
    },
    bjgx() {
      const sub = this.doMath('numberSub', this.mle, this.l3.cxfy, this.l3.fwf, this.l3.xzfy, this.l3.zhsf, this.l3.zjzy, this.l3.qtfy)
      const f = this.doMath('numberAdd', sub, this.l3.zxbt)
      return f
    },
    bjgxl() {
      let v = 0
      if (this.custom.salePrice) {
        v = this.doMath('numberDiv', this.bjgx, this.custom.salePrice)
      }
      const r = this.doMath('numberMul', v, 100)
      return round(r, 2)
    },
    finalRate() {
      const sub = this.doMath('numberSub', this.mll, this.freightRate)
      return sub
    }

  },
  mounted() {
    this.custom.salePrice = this.modelValue.factoryPrice
  },
  methods: {

  }
}
</script>

<style>

</style>
